<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Video monitor')"></h3>
    </template>
    
    <el-row :gutter="12" v-for="monitor in monitorStore.monitors" :key="monitor.id">
      <el-col :span="24">
        <div class="monitor-container">
          <el-row :gutter="8" style="align-items: center;">
            <el-col :span="20">
              <el-select 
                :model-value="monitor.channelId"
                @update:model-value="monitorStore.updateChannel(monitor.id, $event)"
                placeholder="选择频道"
                style="width: 100%;">
                <el-option 
                  v-for="channel in monitorStore.channelList" 
                  :key="channel.id" 
                  :label="channel.title"
                  :value="channel.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button 
                type="danger" 
                size="small" 
                @click="monitorStore.removeMonitor(monitor.id)"
                style="width: 100%;">
                ×
              </el-button>
            </el-col>
          </el-row>
          
          <div class="video-container">
            <img v-if="monitor.imageData" 
                 :src="monitor.imageData" 
                 class="video-image"
                 alt="Video stream" />
            <div v-else class="video-placeholder">
              {{ t('Video display') }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <el-row justify="center">
      <el-col :span="6">
        <el-button 
          type="primary" 
          @click="monitorStore.addMonitor(null)"
          style="width: 100%;">
          +
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useVideoMonitorStore } from '@/stores/videoMonitor'
import { useLanguageStore } from '@/stores/language'

const monitorStore = useVideoMonitorStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Video monitor': {
      'en': 'Video monitor',
      'zh': '视频监控'
    },
    'Video display': {
      'en': 'Video display',
      'zh': '视频显示'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

let updateTimer = null

onMounted(() => {
  monitorStore.initializeVideoMonitor()
})

onUnmounted(() => {
  if (updateTimer) {
    clearInterval(updateTimer)
    updateTimer = null
  }
})
</script>

<style scoped>
.monitor-container {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  padding: 12px;
  background-color: var(--el-bg-color-page);
}

.video-container {
  background-color: var(--el-fill-color-light);
  border-radius: 6px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 8px;
}

.video-placeholder {
  color: var(--el-text-color-placeholder);
  font-size: 1.2em;
}

.video-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style> 